<template>
  <section id="windows-section" class="section js-section u-category-windows">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <!--<svg class="section-icon"><use xlink:href="static/img/icons.svg#icon-windows"></use></svg>-->
          Create and Manage Windows
        </h1>
        <h3>The <code>BrowserWindow</code> module in Electron allows you to create a new browser window or manage an
          existing one.</h3>

        <p>Each browser window is a separate process, known as the renderer process. This process, like the main process
          that controls the life cycle of the app, has full access to the Node.js APIs.

        <p>Open the <a href="http://electron.atom.io/docs/api/browser-window">full API documentation<span
                class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Create a new window
          <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span>
            Process: Main
          </div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="new-window" @click="bindCreateNewWindow">View Demo</button>
          </div>
          <p>The <code>BrowserWindow</code> module gives you the ability to create new windows in your app. This main
            process module can be used from the renderer process with the <code>remote</code> module, as is shown in
            this demo.</p>

          <p>There are a lot of options when creating a new window. A few are in this demo, but visit the <a
                  href="http://electron.atom.io/docs/api/browser-window">documentation<span
                  class="u-visible-to-screen-reader">(opens in new window)</span></a> for the full list.</p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer/views/windows/create-window.js"></code></pre>

          <div class="demo-protip">
            <h2>ProTip</h2>
            <strong>Use an invisible browser window to run background tasks.</strong>
            <p>You can set a new browser window to not be shown (be invisible) in order to use that additional renderer
              process as a kind of new thread in which to run JavaScript in the background of your app. You do this by
              setting the <code>show</code> property to <code>false</code> when defining the new window.</p>
            <pre>
<code class="language-js">var win = new BrowserWindow({
  width: 400, height: 225, show: false
})</code></pre>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="manage-window-demo-toggle" class="js-container-target demo-toggle-button">Manage window state
          <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span>
            Process: Main
          </div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="manage-window">View Demo</button>
            <span class="demo-response" id="manage-window-reply"></span>
          </div>
          <p>In this demo we create a new window and listen for <code>move</code> and <code>resize</code> events on it.
            Click the demo button, change the new window and see the dimensions and position update here, above.</p>
          <p>There are a lot of methods for controlling the state of the window such as the size, location, and focus
            status as well as events to listen to for window changes. Visit the <a
                    href="http://electron.atom.io/docs/api/browser-window">documentation<span
                    class="u-visible-to-screen-reader">(opens in new window)</span></a> for the full list.</p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer/views/windows/manage-window.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="using-window-events-demo-toggle" class="js-container-target demo-toggle-button">Window events: blur
          and focus
          <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span>
            Process: Main
          </div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="listen-to-window">View Demo</button>
            <button class="demo-button disappear" id="focus-on-modal-window">Focus on Demo</button>
          </div>
          <p>In this demo, we create a new window and listen for <code>blur</code> event on it. Click the demo button to
            create a new modal window, and switch focus back to the parent window by clicking on it. You can click the
            <i>Focus on Demo</i> button to switch focus to the modal window again.</p>
          <h5>Renderer Process</h5>
          <pre><code data-path="renderer/views/windows/using-window-events.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button class="js-container-target demo-toggle-button">Create a frameless window
          <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span>
            Process: Main
          </div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="frameless-window">View Demo</button>
          </div>
          <p>
            A frameless window is a window that has no <a
                  href="https://developer.mozilla.org/en-US/docs/Glossary/Chrome">"chrome"</a>,
            such as toolbars, title bars, status bars, borders, etc. You can make a browser window frameless by setting
            <code>frame</code> to <code>false</code> when creating the window.
          </p>

          <h5>Renderer Process</h5>
          <pre><code data-path="renderer/views/windows/frameless-window.js"></code></pre>

          <p>Windows can have a transparent background, too. By setting the <code>transparent</code> option to <code>true</code>,
            you can also make your frameless window transparent:</p>
          <pre>
<code class="language-js">var win = new BrowserWindow({
  transparent: true,
  frame: false
})</code></pre>

          <p>
            For more details, see the <a href="http://electron.atom.io/docs/api/frameless-window/">Frameless Window</a>
            documentation.
          </p>

        </div>
      </div>
    </div>
  </section>
</template>

<script>
  // require('./windows/create-window')
  // require('./windows/manage-window')
  // require('./windows/using-window-events')
  // require('./windows/frameless-window')
  import fs from 'fs'

  const {BrowserWindow} = require('electron').remote
  const path = require('path')
  export default {
    name: 'windows',
    created () {
    },
    mounted () {
      // require('../../assets/demo-btns.js')
    },
    methods: {
      bindCreateNewWindow () {
        const modalPath = path.join('https://www.mi.com')
        console.log(modalPath)
        let win = new BrowserWindow({
          backgroundColor: '#aaa',
          useContentSize: true,
          width: 1400,
          height: 4000,
          show: false,
          alwaysOnTop: false,
          webPreferences: {
            devTools: false,
            offscreen: true
          },
          // fullscreenable: false,
          // enableLargerThanScreen: true,
          // frame: false,
          // titleBarStyle: 'customButtonsOnHover',
          transparent: true
        })

        win.once('ready-to-show', () => {
          win.show()
        })
        win.on('close', () => { win = null })
        win.loadURL(modalPath)
        win.webContents.setFrameRate(4)
        let _imgIndex = 0
        win.webContents.on('paint', (event, dirty, image) => {
          console.log(event, dirty, image)
          // updateBitmap(dirty, image.getBitmap())
          _imgIndex++
          fs.writeFileSync(`imgs/avatar_${_imgIndex}.png`, image.toPNG(), function (err) {
            if (err) {
              console.log(err)
            } else {
              // _imgIndex++
              console.log('图片已保存！')
            }
          })
        })
        setTimeout(() => {
          win.close()
        }, 3000)
      }
    }
  }
</script>

<style lang='less'>

</style>